<template>
	<view class="position-container">
		<view v-if="showMask" :class="newShow ? 'dropdown-mask' : 'undropdown-mask'" @click.stop="changeShow"></view>
		<view class="slot-view" @click="changeShow">
			<slot name="slot-view">

			</slot>
		</view>
		<view v-show="newShow" class="position-view" :style="pStyle">
			<view class="triangle-box" :style="tBStyle">
				<view class="triangle" :style="tStyle"/>
			</view>
			<view class="view-box">
				<scroll-view scroll-y class="scroll" :style="sStyle">
					<view class="scroll-box">
						<slot name="position-view"/>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		model: {
			prop: 'show',
			event: 'update:show'
		},
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			pStyle: {
				type: String,
				default: '',
			}, // 外层容器样式
			tBStyle: {
				type: String,
				default: '',
			}, // 三角外容器样式
			tStyle: {
				type: String,
				default: '',
			}, // 三角容器样式
			sStyle: {
				type: String,
				default: '',
			}, // 内容容器样式
			showMask: {
				type: Boolean,
				default: true,
			}, // 是否显示遮罩层
		},
		data() {
			return {
				newShow: false
			}
		},
		watch: {
			show(val){
				this.newShow = val;
			}
		},
		onLoad() {

		},
		methods: {
			changeShow(){
				this.newShow = !this.newShow;
				this.$emit('update:show',this.newShow);
				this.$emit('changeShow',this.newShow);
			},
		}
	}
</script>

<style lang="less">
.position-container {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	.slot-view {
		position: relative;
		z-index: 9;
	}
	.position-view {
		width: 100%;
		position: absolute;
		z-index: 10;
		.triangle {
			width: 0;
			height: 0;
			border-left: 24rpx solid transparent;
			border-right: 24rpx solid transparent;
			border-bottom: 24rpx solid #e0e0e0; /* 灰色三角形 */
			position: relative;
			z-index: 1;
			transform: translateX(20rpx);
			&::before {
				content: '';
				width: 0;
				height: 0;
				border-left: 24rpx solid transparent;
				border-right: 24rpx solid transparent;
				border-bottom: 24rpx solid #F5F7F9; /* 灰色三角形 */
				position: absolute;
				left: -24rpx;
				bottom: -28rpx;

			}
		}
		.view-box {
			width: 100%;
			background: #F5F7F9;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(24,97,93,0.1);
			border: 1rpx solid #EBEBED;
			border-radius: 8rpx;
			position: relative;
			z-index: 10;
			.scroll {
				box-sizing: border-box;
				// height: 100%;
				height: inherit;
				max-height: 800rpx;
				box-sizing: border-box;
				.scroll-box {
					padding: 20rpx;
					width: 100%;
				}
			}
		}
	}
	.dropdown-mask {
		top: 0;
		left: 0;
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 1;
		pointer-events: auto;
	}
	.undropdown-mask {
		pointer-events: none;
	}
}
</style>